<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日语50音练习</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .control-panel {
            margin-bottom: 20px;
            padding: 15px;
            background: #f5f5f5;
            border-radius: 8px;
        }

        .character-display {
            font-size: 72px;
            text-align: center;
            margin: 30px 0;
            min-height: 100px;
        }

        input {
            width: 100%;
            padding: 12px;
            font-size: 18px;
            text-align: center;
        }

        .stats {
            margin-top: 20px;
            font-size: 16px;
            color: #666;
        }

        .result {
            margin-top: 10px;
            min-height: 24px;
            font-weight: bold;
        }

        .correct {
            color: green;
        }

        .incorrect {
            color: red;
        }

        button {
            padding: 8px 16px;
            margin-right: 10px;
            cursor: pointer;
        }

        .active-mode {
            background: #4CAF50;
            color: white;
        }
    </style>
    <audio id="audioPlayer" controls style="display:none;"></audio>

</head>

<body>
    <div id="app">
        <h1>日语50音练习</h1>
        <div style="margin-bottom: 20px;">
            <a href="/word" style="padding: 8px 12px; background: #f0f0f0; border-radius: 4px; text-decoration: none;">
                切换到词汇练习
            </a>
        </div>
        <div class="control-panel">
            <h3>选择练习行:{{1+1}}</h3>
            <div style="display: grid; grid-template-columns: 2fr; gap: 0px"> <!-- reduced from 8px -->
                {% raw %}
                <div v-for="row in rows" :key="row.num" style="display: flex; align-items: baseline">
                    <label :for="'row-'+row.num" style="min-width: 60px">{{ row.name }}</label>
                    <input type="checkbox" :id="'row-'+row.num" v-model="selectedRows" :value="row.num">
                </div>
                {% endraw %}
            </div>

            <h3>选择模式:</h3>
            <button v-for="mode in modes" :key="mode.value" @click="setMode(mode.value)"
                :class="{ 'active-mode': currentMode === mode.value }">
                {% raw %}{{ mode.label }}{% endraw %}
            </button>

            <button @click="startPractice">开始练习</button>
        </div>

        <div v-if="isPracticing">
            <!-- 测试显示 -->
            <div class="character-display" style="border:2px solid red">
                <span v-text="displayQuestion"></span>  <!-- Changed from currentQuestion -->
                <button v-if="currentMode === 4" @click="playAudio">🔊 重新播放</button>
              </div>

            <input v-model="userAnswer" @keyup.enter="checkAnswer" :placeholder="answerPlaceholder" autofocus>

            <div v-if="lastResult !== null" class="result" :class="lastResult ? 'correct' : 'incorrect'">
                <span v-if="lastResult" v-text="'正确!'"></span>
                <span v-else v-text="`错误! 正确答案: ${correctAnswer} (${correctRomaji})`"></span>
            </div>

            <div class="stats" v-text="`正确率: ${accuracy}% | 平均响应: ${averageTime}s | 总数: ${totalAnswers}`"></div>

            <div class="mistakes-section" v-if="mistakes.length > 0">
                <h3 v-text="`错题记录 (${mistakes.length})`"></h3>
                <div class="mistakes-list">
                    <div v-for="(mistake, index) in mistakes" :key="index" class="mistake-item">
                        <span v-text="`${mistake.question} → `"></span>
                        <span class="correct-answer" v-text="mistake.correctAnswer"></span>
                        <span v-text="`(${mistake.romaji})`"></span>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script>
        const random = {
            choice: (arr) => arr[Math.floor(Math.random() * arr.length)]
        };
        const { createApp, ref, computed, nextTick } = Vue;

        createApp({
            setup() {
                const rows = [
                    { num: 0, name: '全部' },
                    { num: 1, name: 'あ行' }, { num: 2, name: 'か行' },
                    { num: 3, name: 'さ行' }, { num: 4, name: 'た行' },
                    { num: 5, name: 'な行' }, { num: 6, name: 'は行' },
                    { num: 7, name: 'ま行' }, { num: 8, name: 'や行' },
                    { num: 9, name: 'ら行' }, { num: 10, name: 'わ行' },
                    { num: 11, name: 'が行' },{ num: 12, name: 'ざ行' },
                    { num: 13, name: 'だ行' },{ num: 14, name: 'ば行' },
                    { num: 15, name: 'ぱ行' },
                ];
                const modes = [
                    { value: 1, label: '平→片' },
                    { value: 2, label: '片→平' },
                    { value: 3, label: '混合' },
                    { value: 4, label: '听音→平' }  // Added new mode
                ];
                const mistakes = ref([]);  // Add to ref declarations
                const currentQuestionType = ref(''); // 新增
                const currentMode = ref(3);  // 添加状态声明
                const selectedRows = ref([0]);  // 添加状态声明
                const isPracticing = ref(false);  // 添加状态声明
                const userAnswer = ref('');
                const currentQuestion = ref('');
                const correctAnswer = ref('');
                const correctRomaji = ref('');
                const lastResult = ref(null);
                const totalAnswers = ref(0);
                const correctAnswers = ref(0);
                const responseTimes = ref([]);
                const studySet = ref([]); // 新增状态声明
                const answerPlaceholder = computed(() =>
                    currentMode.value === 1 ? '输入片假名' :
                        currentMode.value === 2 ? '输入平假名' :
                            currentMode.value === 4 ? '输入平假名' : // Added for new mode
                                '输入对应假名'
                );
                const displayQuestion = computed(() => {                    
                    if (currentMode.value == 4) return '🔊 听音输入平假名';
                    if (!currentQuestion.value) return '无题目';
                    return currentQuestion.value.includes('/')
                        ? currentQuestion.value.split('/').pop()
                        : currentQuestion.value;
                });

                const accuracy = computed(() =>
                    totalAnswers.value > 0 ? Math.round((correctAnswers.value / totalAnswers.value) * 100) : 0
                );
                const averageTime = computed(() =>
                    responseTimes.value.length > 0 ?
                        (responseTimes.value.reduce((a, b) => a + b, 0) / responseTimes.value.length).toFixed(1) : '0.0'
                );
                const nextQuestion = () => {
                    if (studySet.value.length === 0) return;
                    const item = random.choice(studySet.value);
                    const [hira, kata, romaji] = item;
                    if (currentMode.value === 1) {
                        currentQuestionType.value = 'hira';
                        currentQuestion.value = hira;
                    }
                    else if (currentMode.value === 2) {
                        currentQuestionType.value = 'kata';
                        currentQuestion.value = kata;
                    }
                    else if (currentMode.value === 4) {  // Added for audio mode
                        currentQuestionType.value = 'audio';
                        currentQuestion.value = `src/learn50/${romaji}.mp3`;
                        const audioPlayer = document.getElementById('audioPlayer');

                        // Force reload by adding timestamp
                        audioPlayer.src = `src/learn50/${romaji}.mp3?t=${Date.now()}`;

                        // Delay play slightly to ensure loading
                        setTimeout(() => {
                            audioPlayer.play().catch(e => console.log("Audio play error:", e));
                        }, 100);

                    }
                    else {  // Mixed mode
                        currentQuestionType.value = Math.random() < 0.5 ? 'hira' : 'kata';
                        currentQuestion.value = Math.random() < 0.5 ? hira : kata;
                    }
                    lastResult.value = null;
                    // 设置音频元素的src属性
                    // const audioPlayer = document.getElementById('audioPlayer');
                    // audioPlayer.src = `src/learn50/${romaji}.mp3`;
                };
                const setMode = (mode) => {
                    currentMode.value = mode;
                };
                const startPractice = async () => {
                    try {
                        const response = await fetch('/start', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({
                                rows: selectedRows.value,
                                mode: currentMode.value
                            })
                        });

                        const data = await response.json();

                        if (!data || !data.success || data.hiragana.length === 0) {
                            alert('没有可用的练习数据，请选择其他行。');
                            return;
                        }

                        // 直接使用后端过滤后的数据
                        studySet.value = data.hiragana.map((h, i) => [h, data.katakana[i], data.romaji[i]]);
                        isPracticing.value = true;
                        nextQuestion();
                    } catch (error) {
                        console.error('Error:', error);
                    }
                };
                const checkAnswer = async () => {
                    if (!userAnswer.value) return;

                    const startTime = performance.now();

                    try {
                        const response = await fetch('/check', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({
                                question_type: currentQuestionType.value,
                                question: currentQuestion.value,
                                answer: userAnswer.value,
                                mode: currentMode.value  // Add current mode to request
                            })
                        });

                        const result = await response.json();
                        console.log('Received:', {
                            answer: result.correct_answer,
                            romaji: result.romaji
                        });
                        lastResult.value = result.correct;
                        correctAnswer.value = result.correct_answer || "AAAAA";
                        correctRomaji.value = result.romaji || 'BBB';

                        await nextTick(); // 等待DOM更新
                        totalAnswers.value++;
                        if (result.correct) correctAnswers.value++;
                        if (!result.correct) {
                            mistakes.value.push({
                                question: currentQuestion.value,
                                userAnswer: userAnswer.value,
                                correctAnswer: result.correct_answer,
                                romaji: result.romaji
                            });
                        }
                        const elapsed = (performance.now() - startTime);
                        responseTimes.value.push(elapsed);
                        averageTime.value = (responseTimes.value.reduce((a, b) => a + b, 0) / responseTimes.value.length).toFixed(2);

                        userAnswer.value = '';
                        setTimeout(nextQuestion, 1000); // 1秒后下一题
                    } catch (error) {
                        console.error('Error:', error);
                    }
                };
                const playAudio = () => {
                    const audioPlayer = document.getElementById('audioPlayer');
                    audioPlayer.play();
                };


                return {
                    rows,
                    modes,
                    currentMode,  // 暴露状态
                    selectedRows,  // 暴露状态
                    isPracticing,
                    startPractice,
                    setMode,
                    checkAnswer,
                    userAnswer,
                    currentQuestion,
                    currentQuestionType,
                    answerPlaceholder,
                    accuracy,
                    averageTime,
                    nextQuestion,
                    correctAnswer,
                    correctRomaji,
                    lastResult,
                    totalAnswers,
                    studySet,
                    displayQuestion,
                    mistakes,
                    responseTimes,
                    playAudio
                    // ... exposed properties ...
                }
            }
        }).mount('#app');
    </script>
</body>

</html>